let carousel = document.querySelector(".carousel");
let img = carousel.querySelector(".img_box");
let timer;
// 初始化下标
let num = 1;
// 获取上一个操作的index
let lastIndex = 1;
let flag = true; // 设置开关, 默认可以打开


// 动态生成图片(第一张和最后一张)
// 插入克隆的第一张图片到最后一张图片之后的位置
img.appendChild(img.firstElementChild.cloneNode(true));
// 插入克隆的第四张图片到第一张之前的位置
img.insertBefore(img.children[img.children.length - 2].cloneNode(true), img.firstElementChild);

// 移动到原来第一张图片的位置
img.style.transform = `translateX(-${num}00%)`;

setTimeout(function () {
    img.style.transition = "0.2s ease-in-out";
}, 300);


// 事件代理
carousel.addEventListener("click", function (event) {
    // 左箭头
    (event.target.className == "left") && arrowLeftFn(event.target);
    // 右箭头
    (event.target.className == "right") && arrowRightFn(event.target);
    // 小圆点
    (event.target.classList.contains("dot")) && dotFn(event.target);

});

// 点击右箭头事件
function arrowRightFn(target) {
    if (flag) {
        flagFn();
        img.style.transform = `translateX(-${++num}00%)`;
        // 判断是否到达最后一张
        limit(img.children.length - 1, 1);
        
        // 获取具体span标签
        let rBtnEvent = target.parentElement.nextElementSibling.children[num - 1];
        dotColor(rBtnEvent);
    }
}

// 点击左箭头事件
function arrowLeftFn(target) {
    if (flag) {
        flagFn();
        img.style.transform = `translateX(-${--num}00%)`;
        // 判断是否是第一张
        limit(0, img.children.length - 2);
        // 获取具体span标签
        let lBtnEvent = target.parentElement.nextElementSibling.children[num - 1];
        dotColor(lBtnEvent);
    }
};

// 临界点跳转图片
function limit(limitIndex, setIndex) {
    // limitIndex 设置限制下标
    // setIndex   设置对于下标
    if (num == limitIndex) {
        num = setIndex;
        img.addEventListener("transitionend", function () {
            // 清除过渡效果, 并且ul恢复位置
            img.style.transition = "none";
            img.style.transform = `translateX(-${num}00%)`;

            // 恢复过渡效果
            // 获取最终样式(被计算的样式)
            window.getComputedStyle(img, "style").getPropertyValue("transition-duration");
            img.style.transition = "0.2s ease-in-out";
        })
    }
}


// 小圆点点击事件
function dotFn(target) {
    // 获取自定义属性的值，这个值可以和index对应
    let dataIndex = target.getAttribute("data-index");
    // 操作的值重新赋值到index，那么index就可以更新
    num = dataIndex;
    img.style.transform = `translateX(-${num}00%)`;
    // 调用小圆点颜色函数
    dotColor(target);
};

// 封装小圆点颜色变化函数
function dotColor(tag) {
    // console.log(tag);

    tag.parentElement.children[lastIndex - 1].classList.remove("active");
    tag.classList.add("active");
    // 重新赋值给lastIndex，目的是为了拿到上一次的操作值index
    lastIndex = num;
};

// 控制开关
function flagFn() {
    // 关闭开关
    flag = false;
    img.addEventListener("transitionend", function () {
        flag = true;
    });
}

// 自动轮播
timeFn();
function timeFn() {
    if (timer) {
        clearInterval(timer);
    }
    timer = setInterval(function () {
        arrowRightFn(img);

    }, 1000);
}

// 鼠标移入，停止定时器
carousel.addEventListener("mouseover",()=>clearInterval(timer));
// 鼠标移出开始定时器
carousel.addEventListener("mouseleave", ()=>setTimeout(timeFn, 1000));
// 检测页面是否切换，切换就停止定时器
window.addEventListener("visibilitychange", ()=>document.hidden? clearInterval(timer): timeFn());

